<template>
    <div class="admin-page-welcome h-100 p-2 text-bg-light shadow rounded-3  ">
        <div class="icon">
            <bi-picture :src="appIcon" :width="150" :height="150" ></bi-picture>
        </div>
        <div class="info">
        <h2 class="title">{{appTitle}}</h2>
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        let appInfo = this.$admin.getAppInfo(this.$admin.app);

        let appTitle  = appInfo.title??'';
        if (this.title!=''){
            appTitle = this.title;
        }
 
        let appIcon = appInfo.icon??'';
        if (this.icon!=''){
            appIcon = this.icon;
        }

        return {
            appTitle,
            appIcon
        }
    },
    props:{
        title:{
            type:String,
            default:''
        },
        icon:{
            type:String,
            default:''
        },
        back:{
            type:Boolean,
            default:false
        }
        
    }
}
</script>

<style>
 
.admin-page-welcome{
    display: flex;
    background-color: red;
    align-items: center;
}

.admin-page-welcome .info{
    margin-left: 1em;
    padding: 0.75em;
}
</style>